<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:jsf="http://xmlns.jcp.org/jsf" template="/WEB-INF/template.xhtml">

	<ui:define name="title">
        Search By Basic Details
    </ui:define>

	<ui:define name="description">
        Let you search using the conditions
    </ui:define>

	<ui:define name="implementation">

		<h:form>
			<p:growl id="growl" life="2000" />
			<h:panelGrid columns="2">


				<p:outputLabel for="gender" value="Looking for:" />
				<p:selectOneRadio id="gender" value="#{searchManagedBean.gender}">
					<f:selectItem itemLabel="Male" itemValue="M" />
					<f:selectItem itemLabel="Female" itemValue="F" />
				</p:selectOneRadio>
				<p:outputLabel value="Age:" />
				<h:panelGrid columns="1" style="margin-bottom: 10px">
					<h:outputText id="displayRange"
						value="Between #{searchManagedBean.minAge} and #{searchManagedBean.maxAge}" />
					<p:slider for="txt6,txt7" display="displayRange"
						style="width: 400px" range="true" maxValue="45" minValue="18"
						displayTemplate="Between {min} and {max}" />
				</h:panelGrid>
				<p:spacer />
				<h:panelGrid>
					<h:inputHidden id="txt6" value="#{searchManagedBean.minAge}" />
					<h:inputHidden id="txt7" value="#{searchManagedBean.maxAge}" />
				</h:panelGrid>
				<p:outputLabel value="Height:" />
				<h:panelGrid columns="3" style="margin-bottom: 10px">
					<p:selectOneMenu id="minHeight"
						value="#{searchManagedBean.minHeight}">
						<f:selectItems value="#{searchManagedBean.heightList}"></f:selectItems>
					</p:selectOneMenu>
					<h:outputText value="to" />
					<p:selectOneMenu id="maxHeight"
						value="#{searchManagedBean.maxHeight}">
						<f:selectItems value="#{searchManagedBean.heightList}"></f:selectItems>
					</p:selectOneMenu>
				</h:panelGrid>
				<p:outputLabel value="Occupation:" for="job" />
				<p:autoComplete id="job" dropdown="true" multiple="true"
					minQueryLength="3" value="#{searchManagedBean.occupation}"
					completeMethod="#{searchManagedBean.occupationAutoComplete}" />
				<p:outputLabel value="Annual Income above" for="income" />
				<p:selectOneMenu value="#{searchManagedBean.income}" id="income">
					<f:selectItems value="#{searchManagedBean.incomeList}"></f:selectItems>
				</p:selectOneMenu>
				<p:outputLabel value="Show Profiles with Photo:" />
				<p:inputSwitch value="#{searchManagedBean.withPhoto}"></p:inputSwitch>
				<p:outputLabel value="Show Profiles with Horoscope:" />
				<p:inputSwitch value="#{searchManagedBean.withHoroscope}"></p:inputSwitch>
				<p:spacer />
				<p:commandButton value="Search" id="basicSearch"
					update="growl,:details" action="#{searchManagedBean.basicSearch}"
					style="margin-right:20px;" styleClass="ui-priority-primary" />
			</h:panelGrid>

		</h:form>

	</ui:define>

	<ui:define name="source">



		<p:dataScroller value="#{searchManagedBean.profileList}" var="profile"
			chunkSize="10" scrollHeight="500" id="details">
			<f:facet name="header">
            			Scroll Down to Load More Profiles
        			</f:facet>

			<p:tabView rendered="#{not empty(searchManagedBean.profileList)}">
				<p:tab title="Basic Details">
					<table style="width: 100%">
						<tr>
							<td><table style="width: 100%">
									<tr>
										<td><h:outputText value="Name :" /></td>
										<td><h:outputText
												value="#{profile.firstname} #{profile.lastname}"
												style="font-weight: bold" /></td>
									</tr>
									<tr>
										<td><h:outputText value="Age, Height:" /></td>
										<td><h:outputText
												value="#{profile.dob} #{profile.height} cm"
												style="font-weight: bold" /></td>
									</tr>
									<tr>
										<td><h:outputText value="Rasi, Star:" /></td>
										<td><h:outputText value="#{profile.rasi} #{profile.star}"
												style="font-weight: bold" /></td>
									</tr>
									<tr>
										<td><h:outputText value="Education, Occupation, Income" /></td>
										<td><h:outputText
												value="#{profile.education} #{profile.occupation} #{profile.income}"
												style="font-weight: bold" /></td>
									</tr>
									<tr>
										<td><h:outputText value="Paternal and Maternal Gotram" /></td>
										<td><h:outputText
												value="#{profile.paternalgotram} #{profile.maternalgotram}"
												style="font-weight: bold" /></td>
									</tr>
									<tr>
										<td><h:outputText value="Birth Place:" /></td>
										<td><h:outputText value="#{profile.birthplace}"
												style="font-weight: bold" /></td>
									</tr>
									<tr>
										<td><h:outputText value="Complexion:" /></td>
										<td><h:outputText value="#{profile.complexion}"
												style="font-weight: bold" /></td>
									</tr>
									<tr>
										<td><h:outputText value="About Self" /></td>
										<td><h:outputText value="#{profile.aboutself}"
												style="font-weight: bold" /></td>
									</tr>
								</table></td>
							<td>
								<table style="width: 40%">
									<tr>
										<td><p:graphicImage
												pt:value="https://scontent-b-sin.xx.fbcdn.net/hphotos-xpa1/t31.0-8/1075318_574073522687896_26281572_o.jpg"
												width="300px;"></p:graphicImage></td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</p:tab>

				<p:tab title="Advanced Details">
					<p:media value="#{profile.videoUrl}" width="420"
						height="315" player="flash" />
					<!-- <embed width="420" height="315" jsf:src="#{searchManagedBean.profile.videoUrl}"/> -->
					<!--  http://www.youtube.com/v/XGSy3_Czz8k ,http://youtube.com/v/sTqUBY_JSn4">-->
				</p:tab>

				<p:tab title="Documentation" titleStyleClass="tab-doc docslide-105" />
			</p:tabView>
		</p:dataScroller>


	</ui:define>

</ui:composition>
